<template>
  <view>
    <!-- 作业票审查 分析节点 -->

    <view class="top-header">分析数据结果</view>

    <view class="cu-padding-bottom-38 bg-white">
      <view class="container">
        <view class="line"></view>

        <view
          class="card-wrap"
          v-for="(item, index) in formData.tableData"
          :key="`${index}-${item.dateUnix}-${item.analyticType}-${item.analyticTarget}`"
        >
          <view class="number">{{ index + 1 }}</view>
          <view class="content">
            <view class="header-wrap">
              <view class="title">{{ item.analyticTargetLabel }}</view>
              <image
                v-if="item.analyticResult === '2' && item.analyseId"
                src="@/static/images/special-work/icon-delete.png"
                class="icon-delete"
                @click="handleRemoveTableData(index, item.analyseId)"
              ></image>
            </view>
            <view class="cu-card-wrap">
              <view class="body-wrap">
                <view class="content-wrap">
                  <view class="label">{{ contentLabel }}：</view>
                  <view class="value">{{ item.content }}</view>
                </view>
                <view class="content-wrap">
                  <view class="label">分析项目类型：</view>
                  <view class="value">{{ item.analyticTypeLabel }}</view>
                </view>
                <view class="content-wrap">
                  <view class="label">合格标准：</view>
                  <view class="value">
                    <text v-if="item.eligibilityCriteriaType == 1"
                      >高限 {{ item.eligibilityCriteria }}{{ item.unit }}</text
                    >
                    <text v-else-if="item.eligibilityCriteriaType == 2"
                      >低限 {{ item.eligibilityCriteria }}{{ item.unit }}</text
                    >
                    <text v-if="item.eligibilityCriteriaType == 3">
                      范围值 {{ item.eligibilityCriteria }}{{ item.unit }} ～ {{ item.eligibilityCriteriaMax
                      }}{{ item.unit }}
                    </text>
                  </view>
                </view>
                <view class="content-wrap">
                  <view class="label">分析时间：</view>
                  <view class="value"
                    ><uni-dateformat :date="item.date" format="yyyy-MM-dd hh:mm:ss"></uni-dateformat
                  ></view>
                </view>
                <view class="content-wrap" :class="{ 'text-error': item.analyticResult === '2' }">
                  <view class="label">分析数据：</view>
                  <view v-if="item.analyticResult !== ''" class="value"> {{ item.analyticData }}{{ item.unit }} </view>
                </view>
              </view>
              <image
                v-if="item.analyticResult === '1'"
                src="@/static/images/special-work/icon-qualified.png"
                class="icon-qualified"
              ></image>
              <image
                v-if="item.analyticResult === '2'"
                src="@/static/images/special-work/icon-unqualified.png"
                class="icon-qualified"
              ></image>
            </view>
            <view v-if="item.analyticResult === ''" class="bottom-action">
              <view v-if="item.analyticResult === ''" class="text-error">未分析</view>
              <view class="button" @click="handleAnalysis(item, index)">立即分析</view>
            </view>
          </view>
        </view>

        <view class="cu-padding-top-40 cu-padding-left-20 cu-padding-right-20 cu-relative">
          <view class="add-wrap flex">
            <view class="flex-auto flex align-center">
              <image class="icon" src="@/static/images/tip_icon.png" mode="aspectFit"></image>
              <view v-if="!formData.tableData.length" class="no-data-text">没有数据，请添加分析数据</view>
            </view>
            <view class="button" @click="addButtonClickHandler">添加其他气体分析</view>
          </view>
        </view>
      </view>
    </view>

    <view v-if="nodeInfo.nodeTypeFlag === nodeTypeFlagEnum.ANALYSE" class="page-view" style="margin-bottom: 100rpx">
      <view class="submit_btn">
        <button class="u-button block" @click="handleSubmit">保存</button>
      </view>
    </view>

    <uni-popup ref="popup" :is-mask-click="false" type="center">
      <view class="popup-wrap">
        <view style="max-height: calc(80vh - 150rpx); overflow-y: auto">
          <uni-forms ref="popupForm" :rules="popupRules" :modelValue="popupForm" labelWidth="120px" labelPosition="top">
            <uni-forms-item required name="content" :label="contentLabel" labelWidth="120">
              <view
                v-if="businessType === specialWorkTypeEnum.LIMIT_SPACE"
                class="text-input flex items-center"
                @click="$refs.analyticContent.open()"
              >
                {{ popupForm.content }}
              </view>
              <input
                v-else
                v-model="popupForm.content"
                class="text-input"
                placeholder-class="form-placeholder__style"
                maxlength="20"
              />
            </uni-forms-item>
            <uni-forms-item required name="analyticType" label="分析项目类型" labelWidth="120">
              <div class="text-input flex items-center" @click="$refs.analysisTypeDict.open()">
                {{ popupForm.analyticTypeLabel }}
              </div>
            </uni-forms-item>
            <uni-forms-item required name="analyticTarget" label="分析对象" labelWidth="120">
              <div class="text-input flex items-center" @click="handleShowTarget">
                {{ popupForm.analyticTargetLabel }}
              </div>
            </uni-forms-item>
            <uni-forms-item required name="analyticData" label="分析数据" labelWidth="120">
              <input
                v-model="popupForm.analyticData"
                type="number"
                class="text-input"
                placeholder-class="form-placeholder__style"
                maxlength="10"
                @blur="onAnalyticDataBlur"
              />
              <text style="position: absolute; right: 30rpx; top: 35rpx">{{ popupForm.unit }}</text>
            </uni-forms-item>
            <uni-forms-item required label="合格标准" labelWidth="120">
              <view class="text-input flex items-center">
                <text v-if="popupForm.eligibilityCriteriaType == 1"
                  >高限 {{ popupForm.eligibilityCriteria }}{{ popupForm.unit }}</text
                >
                <text v-else-if="popupForm.eligibilityCriteriaType == 2"
                  >低限 {{ popupForm.eligibilityCriteria }}{{ popupForm.unit }}</text
                >
                <text v-if="popupForm.eligibilityCriteriaType == 3">
                  范围值 {{ popupForm.eligibilityCriteria }}{{ popupForm.unit }} ～ {{ popupForm.eligibilityCriteriaMax
                  }}{{ popupForm.unit }}
                </text>
              </view>
            </uni-forms-item>
            <uni-forms-item required name="analyticResult" label="分析结果" labelWidth="120">
              <div class="text-input flex items-center">{{ popupForm.analyticResultLabel }}</div>
            </uni-forms-item>
            <!--isMust {{isMust}}-->
            <uni-forms-item
              name="alarmDeviceCode"
              label="报警仪编号"
              labelWidth="120"
              :rules="isMust ? [{ required: true, errorMessage: '不能为空' }] : []"
            >
              <input
                v-model="popupForm.alarmDeviceCode"
                class="text-input"
                placeholder-class="form-placeholder__style"
                maxlength="20"
              />
            </uni-forms-item>
          </uni-forms>
        </view>
        <view class="button-wrap">
          <button class="u-button block" @click="handePopupConfirm">确定</button>
          <button class="u-button u-button-default block" @click="handlePopupCancel">取消</button>
        </view>
      </view>
    </uni-popup>
    <Signature ref="signature" auto-upload @success="onSignatureSuccess" />
    <data-picker
      ref="analyticTarget"
      title="分析对象"
      label-key="analysisItem"
      value-key="libId"
      :data="analyticTargetList"
      @confirm="onAnalysisTargetConfirm"
    ></data-picker>
    <data-picker
      ref="analyticContent"
      title="分析部位"
      label-key="label"
      value-key="value"
      :data="analyseOptions"
      @confirm="onAnalysisContentConfirm"
    ></data-picker>
    <data-picker
      ref="analysisTypeDict"
      title="分析项目类型"
      label-key="title"
      value-key="typeId"
      :data="analyseTypeOptions"
      @confirm="onAnalysisTypeConfirm"
    ></data-picker>
  </view>
</template>

<script>
import Signature from '@/pages/jobSlip/components/ContinueSign.vue'
import CuRadioGroup from '@/components/cu-radio-group/cu-radio-group.vue'
import DictPicker from '@/components/dict-picker/index.vue'
import CuSelect from '@/components/CuSelect/index.vue'
import DataPicker from '@/components/data-picker/index.vue'
import {
  saveTicketInspect,
  getHazardMediaLibsByIds,
  getHazardMediaLibs,
  getTicketAnalyse,
  saveTicketAnalyse,
  deleteTicketAnalyse,
  getHazardMediaLibTypeList
} from '@/api/spw/ticketInspect.js'
import { actNodePermissionEnum, signatureTargetEnum, signatureTypeEnum, specialWorkTypeEnum } from '@/utils/constant.js'
import dayjs from 'dayjs'
import { mapGetters } from 'vuex'
import store from '../../../../store'
import { nodeTypeFlagEnum } from '@/utils/constant.js'
const qualifiedEnum = {
  1: '合格',
  2: '不合格'
}
export default {
  props: {
    rollbacks: {
      type: Array,
      default: () => []
    },
    forwardUser: {
      type: Array,
      default: () => []
    },
    nodeInfo: {
      type: Object,
      default: () => ({})
    },
    ticketInfo: {
      type: Object,
      default: () => ({})
    },
    ticketId: {
      type: [Number, String],
      default: ''
    },
    businessType: [Number, String],
    nodeTaskId: {
      type: [Number, String],
      default: ''
    },
    readonly: {
      type: Boolean,
      default: false
    },
    reviewResult: {
      type: [Number, String],
      default: ''
    },
    dictReviewResult: {
      type: Array,
      default: () => []
    }
  },
  components: {
    CuRadioGroup,
    Signature,
    DictPicker,
    DataPicker,
    CuSelect
  },
  computed: {
    contentLabel() {
      switch (this.businessType) {
        case specialWorkTypeEnum.LIMIT_SPACE:
          return '分析部位'
        default:
          return '取样点'
      }
    },
    ...mapGetters(['staffId']),
    isMust() {
      return this.ticketInfo.guardianId === this.staffId
    }
  },
  data() {
    return {
      nodeTypeFlagEnum,
      analyseOptions: [
        {
          label: '上部',
          value: '上部'
        },
        {
          label: '中部',
          value: '中部'
        },
        {
          label: '下部',
          value: '下部'
        }
      ],
      analyseTypeOptions: [],
      saveLoading: false,
      libs: [],
      analyticTargetList: [],
      specialWorkTypeEnum,
      currentIndex: -1,
      popupForm: {
        analyseId: 0,
        alarmDeviceCode: '',
        content: '', // 取样点
        analyticType: '', // 分析项目类型
        analyticTypeLabel: '', // 分析项目类型名称
        analyticTarget: '', // 分析对象
        analyticTargetLabel: '', // 分析对象名称
        eligibilityCriteriaType: '',
        eligibilityCriteria: '',
        eligibilityCriteriaMax: '',
        unit: '', // 单位
        analyticData: '', // 分析数据
        analyticResult: '', // 分析结果 1合格 2不合格
        analyticResultLabel: '',
        dateUnix: 0,
        date: '', // 分析时间
        confirmor: '' // 分析人（签字）
      },
      popupRules: {
        content: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        },
        analyticTarget: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        },
        analyticData: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        },
        analyticResult: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        },
        date: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        }
      },
      formData: {
        reviewResult: actNodePermissionEnum.AGREE,
        nodeId: this.nodeInfo?.nodeId,
        nodeName: this.nodeInfo?.nodeName,
        nodeType: this.nodeInfo?.nodeTypeValue,
        nodeTypeFlag: this.nodeInfo?.nodeTypeFlag,
        nodeTypeLabel: this.nodeInfo?.nodeTypeLabel,
        procInsId: this.nodeInfo?.procInsId,
        ticketId: this.ticketId,
        tableData: []
      }
    }
  },
  async mounted() {
    const request = [getTicketAnalyse(this.ticketId)]
    if (this.ticketInfo.mediaLibIds) {
      request.push(getHazardMediaLibsByIds(this.ticketInfo.mediaLibIds.split(',')))
    }
    const temp = {}
    const data = []
    const [analyse, libs] = await Promise.all(request)

    analyse.data.forEach((item) => {
      const analyseContent = JSON.parse(item.analyseContent)
      temp[analyseContent.analyticTarget] = true
      data.push({
        ...analyseContent,
        analyseId: item.analyseId,
        date: item.createTime,
        dateUnix: dayjs(item.createTime).valueOf()
      })
    })

    if (libs) {
      this.libs = libs.data || []
      libs.data.forEach((item, index) => {
        if (!temp[item.libId]) {
          data.push({
            analyseId: 0,
            alarmDeviceCode: '',
            content: '', // 取样点
            analyticType: item.analysisTypeId, // 分析项目类型
            analyticTypeLabel: item.analysisTypeLabel, // 分析项目类型名称
            analyticTarget: item.libId, // 分析对象
            analyticTargetLabel: item.analysisItem, // 分析对象名称
            eligibilityCriteriaType: item.eligibilityCriteriaType,
            eligibilityCriteria: item.eligibilityCriteria,
            eligibilityCriteriaMax: item.eligibilityCriteriaMax,
            unit: item.unit, // 单位
            analyticData: '', // 分析数据
            analyticResult: '', // 分析结果
            analyticResultLabel: '',
            dateUnix: index,
            date: '', // 分析时间
            confirmor: '' // 分析人（签字）
          })
        }
      })
    }
    this.formData.tableData = data
    this.getAnalyseTypeOptions()
  },
  methods: {
    handleShowTarget() {
      if (!this.popupForm.analyticType) {
        this.$modal.showToast('请先选择分析项目类型')
        return
      }
      this.$refs.analyticTarget.open()
    },
    async getGaslibData(analysisTypeId) {
      const { rows } = await getHazardMediaLibs({ analysisTypeId, pageSize: 100000 })
      this.analyticTargetList = rows
    },
    async getAnalyseTypeOptions() {
      const { data } = await getHazardMediaLibTypeList()
      this.analyseTypeOptions = data
    },
    onAnalysisContentConfirm(val) {
      this.popupForm.content = val.value
    },
    // 分析对象
    onAnalysisTargetConfirm(val) {
      if (val.libId === this.popupForm.analyticTarget) {
        return
      }
      this.popupForm.analyticTarget = val.libId
      this.popupForm.analyticTargetLabel = val.analysisItem
      this.popupForm.eligibilityCriteriaType = val.eligibilityCriteriaType
      this.popupForm.eligibilityCriteria = val.eligibilityCriteria
      this.popupForm.eligibilityCriteriaMax = val.eligibilityCriteriaMax
      this.popupForm.unit = val.unit
      this.popupForm.analyticData = ''
      this.popupForm.analyticResult = ''
      this.popupForm.analyticResultLabel = ''
    },
    // 分析类型
    onAnalysisTypeConfirm(val) {
      if (val.value === this.popupForm.analyticType) {
        return
      }
      this.popupForm.analyticType = val.value
      this.popupForm.analyticTypeLabel = val.name
      this.popupForm.analyticTarget = ''
      this.popupForm.analyticTargetLabel = ''
      this.popupForm.eligibilityCriteriaType = ''
      this.popupForm.eligibilityCriteria = ''
      this.popupForm.eligibilityCriteriaMax = ''
      this.popupForm.unit = ''
      this.popupForm.analyticData = ''
      this.popupForm.analyticResult = ''
      this.popupForm.analyticResultLabel = ''
      this.getGaslibData(val.value)
    },
    addButtonClickHandler() {
      const confirmor = this.$store.state.user.name
      this.currentIndex = -1
      this.popupForm = {
        analyseId: 0,
        alarmDeviceCode: '',
        content: '', // 取样点
        analyticType: '', // 分析项目类型
        analyticTypeLabel: '', // 分析项目类型名称
        analyticTarget: '', // 分析对象
        analyticTargetLabel: '', // 分析对象名称
        eligibilityCriteriaType: '',
        eligibilityCriteria: '',
        eligibilityCriteriaMax: '',
        unit: '', // 单位
        analyticData: '', // 分析数据
        analyticResult: '', // 分析结果
        analyticResultLabel: '',
        dateUnix: 0,
        date: '', // 分析时间
        confirmor // 分析人（签字）
      }
      this.$refs.popup.open()
    },
    handleAnalysis(item, index) {
      const confirmor = this.$store.state.user.name
      this.currentIndex = index
      this.getGaslibData(item.analyticTarget)
      this.getAnalyseTypeOptions()
      this.popupForm = {
        ...item,
        confirmor // 分析人（签字）
      }
      this.$refs.popup.open()
    },
    handlePopupCancel() {
      this.$refs.popup.close()
    },
    async handleRemoveTableData(index, analyseId) {
      await deleteTicketAnalyse(analyseId)
      this.formData.tableData.splice(index, 1)
      // 删除成功后，必须检查作业票危险介质中的分析是否不全
      const temp = {}
      this.formData.tableData.forEach((item) => {
        temp[item.analyticTarget] = true
      })
      this.libs.forEach((item, index) => {
        if (!temp[item.libId]) {
          this.formData.tableData.push({
            analyseId: 0,
            alarmDeviceCode: '',
            content: '', // 取样点
            analyticType: item.analysisTypeId, // 分析项目类型
            analyticTypeLabel: item.analysisTypeLabel, // 分析项目类型名称
            analyticTarget: item.libId, // 分析对象
            analyticTargetLabel: item.analysisItem, // 分析对象名称
            eligibilityCriteriaType: item.eligibilityCriteriaType,
            eligibilityCriteria: item.eligibilityCriteria,
            eligibilityCriteriaMax: item.eligibilityCriteriaMax,
            unit: item.unit, // 单位
            analyticData: '', // 分析数据
            analyticResult: '', // 分析结果
            analyticResultLabel: '',
            dateUnix: this.formData.tableData.length + 1 + index,
            date: '', // 分析时间
            confirmor: '' // 分析人（签字）
          })
        }
      })
    },
    onAnalyticDataBlur() {
      let { eligibilityCriteriaType, eligibilityCriteria, eligibilityCriteriaMax, analyticData } = this.popupForm
      if (!analyticData && Number(analyticData) !== 0) {
        this.popupForm.analyticResult = ''
        this.popupForm.analyticResultLabel = ''
        return
      }
      eligibilityCriteria = Number(eligibilityCriteria)
      analyticData = Number(analyticData)
      eligibilityCriteriaMax = Number(eligibilityCriteriaMax)
      // 高限
      if (eligibilityCriteriaType === '1') {
        this.popupForm.analyticResult = analyticData <= eligibilityCriteria ? '1' : '2'
        this.popupForm.analyticResultLabel = qualifiedEnum[this.popupForm.analyticResult]
        return
      }
      // 低限
      if (eligibilityCriteriaType === '2') {
        this.popupForm.analyticResult = analyticData >= eligibilityCriteria ? '1' : '2'
        this.popupForm.analyticResultLabel = qualifiedEnum[this.popupForm.analyticResult]
        return
      }
      // 区间内
      if (eligibilityCriteriaType === '3') {
        this.popupForm.analyticResult =
          analyticData >= eligibilityCriteria && analyticData <= eligibilityCriteriaMax ? '1' : '2'
        this.popupForm.analyticResultLabel = qualifiedEnum[this.popupForm.analyticResult]
      }
    },
    async handePopupConfirm() {
      if (this.saveLoading) {
        return
      }
      if (this.currentIndex === -1) {
        const item = this.formData.tableData.find(
          (pet) => pet.analyticResult === '' && pet.analyticTarget === this.popupForm.analyticTarget
        )
        if (item) {
          this.$modal.showToast(this.popupForm.analyticTargetLabel + '存在未分析的数据，不允许添加')
          return
        }
      }
      await this.$refs.popupForm.validate()
      this.onAnalyticDataBlur()
      this.signatureTarget = signatureTargetEnum.ANALYSE_FORM
      this.$refs.signature.open()
    },
    async _saveAnalyseForm(tempFilePath) {
      this.saveLoading = true
      const { data } = await saveTicketAnalyse({
        alarmDeviceCode: this.popupForm.alarmDeviceCode,
        analyseContent: JSON.stringify(this.popupForm),
        mediaLibId: this.popupForm.analyticTarget,
        signatureUrl: tempFilePath,
        ticketId: this.ticketId
      }).finally(() => {
        this.saveLoading = false
      })
      if (this.currentIndex > -1) {
        this.$set(this.formData.tableData, this.currentIndex, {
          ...this.popupForm,
          analyseId: data.analyseId,
          date: data.createTime,
          dateUnix: dayjs(data.createTime).valueOf()
        })
        this.formData.tableData = this.formData.tableData.sort((a, b) => b.dateUnix - a.dateUnix)
      } else {
        this.formData.tableData.unshift({
          ...this.popupForm,
          analyseId: data.analyseId,
          date: data.createTime,
          dateUnix: dayjs(data.createTime).valueOf()
        })
      }
      this.$refs.popup.close()
    },
    /**
     * @description  签名成功
     */
    onSignatureSuccess(tempFilePath) {
      if (this.signatureTarget === signatureTargetEnum.ANALYSE_FORM) {
        this._saveAnalyseForm(tempFilePath)
      }
    },
    onTimeChange(val, key) {
      this.popupForm[key] = val.trim()
    },
    async handleSubmit() {
      if (this.saveLoading) {
        return
      }
      // 如果是通过，需要填写分析数据
      if (this.formData.reviewResult === actNodePermissionEnum.AGREE && !this.formData.tableData.length) {
        this.$modal.showToast('请添加分析数据')
        return
      }

      // 是否存在未分析的
      const unAnalyticData = []
      this.formData.tableData.forEach((item) => {
        if (item.analyticResult === '') {
          unAnalyticData.push(item.analyticTargetLabel)
        }
      })
      if (unAnalyticData.length) {
        uni.showModal({
          title: '提示',
          content: `${unAnalyticData.join('，')} 未分析，请先分析后再提交`,
          showCancel: false,
          confirmText: '我知道了'
        })
        return
      }

      // 最新分析的是否存在不合格的
      const temp = {}
      const unstandardData = []
      this.formData.tableData.forEach((item) => {
        if (!temp[item.analyticTarget]) {
          temp[item.analyticTarget] = item
          if (item.analyticResult === '2') {
            unstandardData.push(item.analyticTargetLabel)
          }
        }
      })
      if (unstandardData.length) {
        uni.showModal({
          title: '提示',
          content: `${unstandardData.join('，')} 最新分析结果为不合格，必须合格后才能保存，请继续分析`,
          showCancel: false,
          confirmText: '我知道了'
        })
        return
      }
      this.signatureTarget = signatureTargetEnum.ANALYSE_NODE
      // 打开签字弹窗
      // this.$refs.signature.open()
      this._save()
    },
    async _save(path) {
      this.saveLoading = true
      const req = {
        ...this.formData
      }
      try {
        await saveTicketInspect(this.nodeTaskId, req)
        this.$modal.showToast('提交成功')
        this.$emit('success')
      } catch (err) {
        this.saveLoading = false
      }
    },
    /**
     * 审核意见发生改变
     */
    onResultChange(val) {
      this.formData.reviewDescription = val?.defaultOpinion ?? ''
      this.formData.targetNodeId = ''
      this.formData.targetNodeName = ''
      this.formData.candidateId = ''
      this.formData.candidateName = ''
    },
    /**
     * 回退节点发生变化
     */
    onNodeChange(row) {
      this.formData.targetNodeName = row?.nodeName ?? ''
    },

    /**
     * 转发人发生变化
     */
    onForwardChange(row) {
      this.formData.candidateName = row?.userName ?? ''
    }
  }
}
</script>

<style lang="scss" scoped>
.submit_btn {
  padding: 30rpx;
}
.top-header {
  font-size: 26rpx;
  color: #999999;
  line-height: 80rpx;
  padding-left: 30rpx;
}
.text-error {
  color: #a14430;
}
.container {
  position: relative;

  .line {
    position: absolute;
    left: 55rpx;
    height: 100%;
    display: inline-block;
    width: 1px;
    background-color: #d5d7e3;
  }

  .add-wrap {
    background-color: #fff;
    background: #f8f8f8;
    border-radius: 39rpx;
    padding: 10rpx 20rpx;

    .icon {
      width: 32rpx;
      height: 32rpx;
      margin-right: 28rpx;
    }

    .no-data-text {
      line-height: 58rpx;
      font-size: 30rpx;
      color: #999999;
    }

    .button {
      line-height: 58rpx;
      background: #fff;
      font-size: 30rpx;
      color: #2ac0c8;
      border: 1px solid #2ac0c8;
      padding: 0 30rpx;
    }
  }

  .card-wrap {
    position: relative;
    padding: 40rpx 30rpx 0 20rpx;
    display: flex;

    .number {
      width: 30rpx;
      height: 30rpx;
      line-height: 30rpx;
      background: #88b4c4;
      box-shadow: 0rpx 3rpx 6rpx 1px rgba(136, 180, 196, 0.5);
      border-radius: 50%;
      font-size: 24rpx;
      color: #ffffff;
      text-align: center;
      margin-left: 20rpx;
    }

    .content {
      margin-left: 28rpx;
      flex: 1;
      box-shadow: 0rpx 4rpx 10rpx 1px rgba(204, 204, 204, 0.5);
      border-radius: 10rpx;
      position: relative;
      .bottom-action {
        background: #f1f6f9;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 24rpx;
        .button {
          height: 58rpx;
          line-height: 58rpx;
          background: #fff;
          border: 1px solid #2ac0c8;
          font-size: 28rpx;
          color: #2ac0c8;
          padding: 0 30rpx;
        }
      }
      .header-wrap {
        background: #f1f6f9;
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 40rpx;
        padding: 20rpx 30rpx;

        .title {
          font-size: 30rpx;
          font-weight: 800;
          color: #333333;
        }

        .time {
          font-size: 26rpx;
          color: #999999;
        }
      }
    }
  }
}
.icon-delete {
  width: 40rpx;
  height: 44rpx;
}
.cu-card-wrap {
  margin: 0;
  position: relative;
  .icon-qualified {
    position: absolute;
    right: 30rpx;
    bottom: 30rpx;
    z-index: 1;
    width: 100rpx;
    height: 88rpx;
  }
}

.text-area {
  height: 140rpx;
}

.uni-forms-item {
  margin-bottom: 20rpx;
}

.popup-wrap {
  width: 650rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 20rpx 30rpx;
  .button-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.content-wrap.text-error {
  .label,
  .value {
    color: #a14430;
  }
}
</style>
